<template>
  <div id="app-other">
    <div class="t1">
      <div class="t2">
        <div :class="{ active: type == 1 }" @click="type = 1">
          正在下载（55）
        </div>
        <div :class="{ active: type == 2 }" @click="type = 2">已完成（123）</div>
      </div>
      <div class="btns">
        <div @click="type = 1">全部开始</div>
        <div @click="type = 3">全部暂停</div>
      </div>
    </div>
    <div>
      <div class="t4" v-if="type == 1">
        <div class="t6">
          <div>文件名</div>
          <div>
            <div>进度</div>
            <div>文件大小</div>

            <div>下载日期</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="list">
          <div class="t7" v-for="(item, idx) in 7" :key="idx">
            <div>
              <div class="t8">
                <p>
                  <el-image
                    v-if="idx < 4"
                    class="listImg"
                    :src="url"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                  <img v-else class="listImg" src="@/assets/md-folder@1x.png" />
                </p>
                <p v-if="idx < 4">
                  图片名称图片名称图片名称.......图片名称.jpg
                </p>
                <p v-else>只读共享指定用户</p>
              </div>
            </div>
            <div>
              <div>50%</div>
              <div>9.8MB</div>
              <div>2023-03-16 21:56:03</div>
            </div>
          </div>
        </div>
      </div>

      <div class="t4 type2" v-if="type == 2">
        <div class="t6">
          <div>文件名</div>
          <div>
            <div>文件大小</div>

            <div>完成日期</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="list">
          <div class="t7" v-for="(item, idx) in 7" :key="idx">
            <div>
              <div class="t8">
                <p>
                  <el-image
                    v-if="idx < 4"
                    class="listImg"
                    :src="url"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                  <img v-else class="listImg" src="@/assets/md-folder@1x.png" />
                </p>
                <p v-if="idx < 4">
                  图片名称图片名称图片名称.......图片名称.jpg
                </p>
                <p v-else>只读共享指定用户</p>
              </div>
            </div>
            <div>
              <div>9.8MB</div>
              <div>2023-03-16 21:56:03</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下载无数据 -->
      <div class="hs" v-if="type == 3">
        <p>
            <img src="@/assets/38.png" />
          </p>
          <p >
            暂无下载任务
          </p>
      </div>
    </div>
  </div>
</template>
<script>
import storage from "store2";
import { ipcApiRoute } from "@/api/main";

const fileList = [
  {
    content: "【下载】目录",
    id: "downloads",
  },
  {
    content: "【图片】目录",
    id: "pictures",
  },
  {
    content: "【文档】目录",
    id: "documents",
  },
  {
    content: "【音乐】目录",
    id: "music",
  },
];
export default {
  data() {
    return {
      type: 1,
      file_list: fileList,
      action_url: "",
      image_info: [],
      num: 0,
      servicAddress: "",
      dir_path: "D:\\www\\ee",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  methods: {
    test() {},
    handleFileChange(info) {
      console.log("handleFileChange-----");
      if (this.action_url == "") {
        this.$message.error("http服务未开启");
        return;
      }
      const status = info.file.status;
      if (status !== "uploading") {
        console.log(info.file);
      }
      if (status === "done") {
        const uploadRes = info.file.response;
        console.log("uploadRes:", uploadRes);
        if (uploadRes.code !== "success") {
          this.$message.error(`file upload failed ${uploadRes.code} .`);
          return false;
        }
        this.num++;
        const picInfo = uploadRes.data;
        picInfo.id = this.num;
        picInfo.imageUrlText = "image url";
        this.image_info.push(picInfo);
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
};
</script>
<style lang="less" scoped>
#app-other {
  text-align: left;
  width: 100%;
  .t1 {
    height: 70px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    border-bottom: 1px solid rgba(244, 245, 247, 1);
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .t2 {
      display: flex;
      align-items: center;
      div {
        margin-left: 40px;
        cursor: pointer;
      }
      .active {
        color: rgba(47, 125, 249, 1);
      }
    }
    .btns {
      display: flex;
      div {
        width: 120px;
        height: 45px;
        line-height: 45px;
        border-radius: 0px 5px 5px 0px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        border: 1px solid rgba(248, 248, 250, 1);
        color: rgba(129, 131, 143, 1);
        cursor: pointer;
        font-size: 14px;
      }
      > div:nth-child(1) {
        color: rgba(47, 125, 249, 1);
        border-right: 0;
      }
    }
  }
}
.hs {
  height: 800px;
  padding-top: 340px;
  text-align: center;
  p{
    color: rgba(153, 153, 153, 1);
font-size: 18px;
  }
}
.t4 {
  background: #fff;
  text-align: left;
  .t5 {
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    cursor: pointer;
    padding: 20px;
    font-weight: bold;
    img {
      margin-right: 6px;
      width: 16px;
    }
  }
  .t6 {
    display: flex;
    justify-content: space-between;
    height: 70px;
    line-height: 70px;
    > div:nth-child(1) {
      width: 50%;
      padding-left: 20px;
      cursor: pointer;
      img {
        margin-right: 14px;
      }
    }
    > div:nth-child(2) {
      width: 40%;
      display: flex;
      text-align: center;

      > div {
        width: 33.3%;
      }
    }
  }
  .list {
    > div:hover {
      cursor: pointer;
      background: #ebf1ff;
      transition: all 0.5s;
    }
    .t7 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;

      > div:nth-child(1) {
        width: 50%;
        padding-left: 20px;

        display: flex;
        align-items: center;
        .t8 {
          display: flex;
          align-items: center;
          input {
            width: 418px;
            height: 36px;
            background-color: rgba(238, 244, 249, 1);
            color: rgba(136, 136, 136, 1);
            font-size: 14px;
            border: 0;
            padding-left: 6px;
          }
        }
        .listImg {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
      > div:nth-child(2n) {
        width: 40%;
        display: flex;
        text-align: center;
        align-items: center;

        > div {
          width: 33.3%;
        }
      }
      .actIcon {
        margin-right: 16px;
        width: 16px;
      }
    }
  }
}
.type2 {
  .t6 {
    > div:nth-child(2) {
      > div {
        width: 50%;
      }
    }
  }
  .list {
    .t7 {
      > div:nth-child(2n) {
        > div {
          width: 50%;
        }
      }
    }
  }
}
</style>
